<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item :label="$t('startDate')">
        <el-date-picker
          v-model="startDate"
          type="datetime"
          :placeholder="$t('startDate')"
          align="right"
          :picker-options="pickerOptions1"
          value-format="timestamp"
        />
      </el-form-item>
      <el-form-item :label="$t('endDate')">
        <el-date-picker
          v-model="endDate"
          type="datetime"
          :placeholder="$t('endDate')"
          align="right"
          :picker-options="pickerOptions1"
          value-format="timestamp"
        />
      </el-form-item>
      <el-form-item>
        <el-select v-model="type" @change="pageGetDeviceLog">
          <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="tag" :placeholder="$t('tag')"/>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="pageGetDeviceLog"
        >{{ $t('search') }}
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-plus"
          type="primary"
          @click="showInsert"
        >{{ $t('insert') }}
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="deviceLogList"
      style="width: 100%"
    >
      <el-table-column :label="$t('type')">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.type"
          >
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        prop="tag"
        :label="$t('tag')"
      />
      <el-table-column
        prop="msg"
        :label="$t('msg')"
      />
      <el-table-column
        :label="$t('time')"
      >
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span style="margin-left: 13px">{{
              formatDate(scope.row.timestamp)
            }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('function')" width="150">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="edit(scope.row)"
          >{{ $t('edit') }}
          </el-button>
          <el-button
            style="color: #f56c6c"
            type="text"
            icon="el-icon-delete"
            @click="del(scope.row)"
          >{{ $t('delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: right;margin: 15px 0">
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog
      :visible.sync="dialogDeviceLogVisible"
      top="15px"
    >
      <el-form
        label-width="20%"
        :model="deviceLog"
      >
        <el-form-item :label="$t('type')">
          <el-select v-model="deviceLog.type">
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('tag')">
          <el-input v-model="deviceLog.tag"/>
        </el-form-item>
        <el-form-item :label="$t('msg')">
          <el-input
            v-model="deviceLog.msg"
            type="textarea"
            :rows="5"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDeviceLogVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="addOrUpdate">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { cancelNotice, formatDate, listLogType, successNotice } from '@/util/common'
import { deleteDeviceLog, insertDeviceLog, pageGetDeviceLog, updateDeviceLog } from '@/api/iot/iotDeviceLogApi'
import { getPageSize, setPageSize } from '@/util/storage'

export default {
  name: 'DeviceLog',
  props: {
    device: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      deviceLogList: [],
      deviceLog: {},
      dialogDeviceLogVisible: false,
      typeList: [],
      type: null,
      tag: null,
      startDate: 0,
      endDate: 0,
      pickerOptions1: {
        shortcuts: [
          {
            text: this.$t('today'),
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: this.$t('today'),
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: this.$t('a') + this.$t('week') + this.$t('ago'),
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      currentPage: 1,
      total: 0,
      pageSize: getPageSize()
    }
  },
  created() {
    this.typeList = listLogType(this)
    this.pageGetDeviceLog()
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      setPageSize(this.pageSize)
      this.pageGetDeviceLog()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.pageGetDeviceLog()
    },
    formatDate(time) {
      return formatDate(this, time)
    },
    showInsert() {
      this.deviceLog = {
        deviceId: this.device.deviceId
      }
      this.dialogDeviceLogVisible = true
    },
    pageGetDeviceLog() {
      const startDate = Math.round(this.startDate / 1000)
      const endDate = Math.round(this.endDate / 1000)
      pageGetDeviceLog({
        type: this.type,
        tag: this.tag,
        deviceId: this.device.deviceId,
        pageSize: this.pageSize,
        currentPage: this.currentPage,
        startDate: startDate === 0 ? null : startDate,
        endDate: endDate === 0 ? null : endDate
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.total = data.total
          this.deviceLogList = data.data
        } else {
          this.total = 0
          this.deviceLogList = []
        }
      })
    },
    addOrUpdate() {
      const json = {
        ...this.deviceLog
      }
      if (!json.logId) {
        insertDeviceLog(json).then(res => {
          const { code } = res
          if (code === '200') {
            this.dialogDeviceLogVisible = false
          }
          this.pageGetDeviceLog()
        })
      } else {
        updateDeviceLog(json).then(res => {
          const { code } = res
          if (code === '200') {
            this.dialogDeviceLogVisible = false
          }
          this.pageGetDeviceLog()
        })
      }
    },
    edit(item) {
      this.deviceLog = item
      this.dialogDeviceLogVisible = true
    },

    del(item) {
      const that = this
      this.$confirm(this.$t('delete') + item.name, this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteDeviceLog({
            logId: item.logId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              successNotice(that)
            }
            that.pageGetDeviceLog()
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    }
  }
}
</script>

<style scoped>

</style>
